<template>
  <div>
    <h1 class="header">test2</h1>
    <Child class="con"></Child>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Test2",
});
</script>

<script setup lang="ts">
import Child from "./Child.vue";
</script>

<!-- 
  scoped作用域的原理:
    - 在当前的组件内所有的元素上都添加了一个 data-v-xxxxx的自定义属性
    - 如果内部的元素有组件,则把当前的自定义属性添加到这个组件的根元素上(也就是说根元素上可能有两个以上的自定义属性标识)
    - 当我们在scoped区域定义样式的时候,解析时,会在所有的选择器后添加一个属性过滤选择器
    - 经过以上的过程,scoped中的样式只能作用在当前组件的元素上或者子组件的根元素上

  解决方案:
    - 把子组件的样式写在外部
    - 把操作子组件的选择器写在 深度作用选择器中(v2 ::deep xxx   v3: :deep(xxxx))
 -->
<style scoped lang="scss">
.header {
  background: pink;
  color: aquamarine;
}

/* ::deep h2 {
  background-color: red;
} */

//原理是直接从当前组件标识的属性选择器 下进行直接后代选择  [data-v-xxxx] h2{}
:deep(h2) {
  background-color: red;
}

//为什么不起作用呢? .con[data-v-11555221] h2[data-v-11555221]{}
</style>

<style>
/* .con h2 {
  background-color: red;
} */
</style>
